<template>
  <!-- http://localhost:8000/#/inspectProject?inspectId=3773a8a25efc41e79d65d955da55b8ea&studentId=329aa95267ce42d7bcdc0fdf98689c21 -->
  <view class="inspectProjectChild">
    <view class="content flex">
      <view class="head-box flex">
        <view class="head-back flex" @click="back">
          <view class="icon iconfont icon-arrow_back"></view>
        </view>
        <view class="head-title flex">{{childInfo.name}}体检信息</view>
        <view class="head-right flex"></view>
      </view>
      <view class="content-box" v-if='childList.length > 0'>
        <view v-for="item in childList" :key='item.id' class="inspeceListBox" @click="toLink(item)">
          <view class="inspeceList">
            <view class="date">{{ item.creatDate }}</view>
            <view :class="'inspeceListDetail flex ' + (item.status == 1 || item.status == 3 ? 'isInspeceListDetail' : '')">
              <view class="des flex">
                <view class="flex studentBox">
                  <view class="name">{{ item.studentName }}</view>
                  <!-- <p class="sex">{{ item.sex }}</p> -->
                </view>
                <view class="flex desInner">
                  <view class="name">{{ item.inspectName }}</view>
                  <!-- <view class="idCard">{{ item.grade }} - {{ item.classs }}</view> -->
                </view>
              </view>
              <view v-if="item.status == 1 || item.status == 3" class="btn flex">
                <view>查</view>
                <view>看</view>
                <view>报</view>
                <view>告</view>
              </view>
              <view v-else-if="item.status == 0" class="btn flex unBtn">
                <view>暂</view>
                <view>无</view>
                <view>报</view>
                <view>告</view>
              </view>
              <view v-else-if="item.status == 2" class="btn flex unBtn">
                <view>待</view>
                <view>出</view>
                <view>报</view>
                <view>告</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else class="content-box noData">
        <view class="icon iconfont icon-zanwushuju-copy"></view>
        <!-- {{ item.status }} -->
      </view>
    </view>
  </view>
</template>
<script>
import mRequest from "@/api/index";

export default {
  data () {
    return {
      parentPhone: '',
      childList: [],
      childInfo: {}
    }
  },
  methods: {
    // {
    //       label: '未检查',
    //       value: '0'
    //     },
    //     {
    //       label: '检查正常，已出报告',
    //       value: '1'
    //     },
    //     {
    //       label: '检查异常，待出报告',
    //       value: '2'
    //     },
    //     {
    //       label: '检查异常，已出报告',
    //       value: '3'
    //     }
    toLink (item) {
      if (item.status == '0') {
        uni.showToast({
          icon: 'none',
          title: '未检查'
        });
        return
      }
      if (item.status == '2') {
        uni.showToast({
          icon: 'none',
          title: '待出报告'
        });
        return
      }
      uni.navigateTo({
        url: `/pages/home-main/inspect-project?inspectId=${item.inspectId}&studentId=${item.studentId}`
      })
    },
    back () {
      uni.navigateBack()
    },
    getList () {
      let params = {
          studentId: this.childInfo.id,
          page: 1,
          limit: 1000,
          orderSql: 'creat_date desc'
        }
      mRequest.getFourReportChild(params).then(( data ) => {
        this.childList = data.page.records
      })
    }
  },
  onLoad (options) {
    this.childInfo = JSON.parse(options.info)
    this.getList()
  }
}
</script>
<style lang='scss'>
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
.head-box{
  height: 3rem;
  width: 100%;
  background: #fff;
  justify-content: space-between;
  .head-back{
    width: 2rem;
    height: 100%;
  }
  .head-title{
    flex: 1;
    font-size: 1rem;
    font-weight: 600;
  }
  .head-right{
    width: 2rem;
    height: 100%;
  }
}
.content-box{
  flex: 1;
  width: 100%;
  overflow: auto;
  padding: 0.5rem !important;
  box-sizing: border-box;
  .child-student{
    margin: 1rem 0;
    padding: 0.5rem;
    background: #fff;
    border-radius: 0.5rem;
    font-size: 1rem;
    position: relative;
    .des{
      padding: 0.3rem 0;
      font-weight: 600;
      box-sizing: border-box;
    }
    .des-title{
      font-weight: 500;
      color: #666;
      font-size: 0.95rem;
    }
    .icon-zinv{
      font-size: 4rem;
      position: absolute;
      bottom: 0;
      right: 0;
      color: #c2dcc150;
    }
  }
}
.noData{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #999;
  font-size: 0.7rem;
  .icon-zanwushuju-copy{
    font-size: 3rem;
  }
}
.inspectProjectChild {
  height: 100vh;
  width: 100%;
  background: #f5f5f5;
  overflow: auto;
  .content {
    position: relative;
    width: 100%;
    max-width: 40rem;
    margin: 0 auto;
    background: #f5f5f5;
    // background: linear-gradient(to bottom, #c2dcc1 20%, #f5f5f5 60%, #f5f5f5 90%, #c2dcc1 100%);
    // padding: 1rem;
    height: 100vh;
    flex-direction: column;
    .inspeceListBox{
      .inspeceList{
        width: 100%;
        padding: 0.625rem 0.625rem 0.625rem 1.875rem;
        position: relative;
        box-sizing: border-box;
        .date{
          font-size: 1rem;
          color: #333;
          font-weight: 500;
        }
        .inspeceListDetail{
          margin-top: 0.625rem;
          height: 6.25rem;
          width: 100%;
          background: #99999987;
          border-radius: 1rem;
          .des{
            flex: 1;
            background: #fff;
            height: 100%;
            border-radius: 1rem;
            padding: 0.4rem;
            box-sizing: border-box;
            .studentBox{
              width: 4.375rem;
              flex-direction: column;
              height: 100%;
              border-right: 0.0625rem dotted #999;
              .name{
                font-size: 0.95rem;
                font-weight: 500;
                color: #333;
                letter-spacing: 0.125rem;
                padding-bottom: 0.5rem;
              }
              .sex{
                font-size: 0.875rem;
                color: #666;
              }
            }
            .desInner{
              flex: 1;
              justify-content: center;
              flex-direction: column;
              align-items: baseline;
              padding-left: 0.625rem;
              .name{
                font-size: 0.85rem;
                font-weight: 500;
                color: #333;
                padding-bottom: 0.5rem;
              }
            }
          }
          .btn{
            width: 2.5rem;
            height: 100%;
            font-size: 0.75rem;
            flex-direction: column;
            justify-content: space-between;
            padding: 0.5rem 0;
            color: #fff;
            box-sizing: border-box;
          }
          .unBtn{
            color: #666666;
            // background: #fff;
          }
        }
        .isInspeceListDetail{
          background: #33c7b1;
        }
      }
      .inspeceList:before{
        content: '';
        position: absolute;
        left: 0.625rem;
        top: 1rem;
        height: 0.5rem;
        width: 0.5rem;
        border-radius: 0.625rem;
        background: #33c7b1;
        z-index: 2;
      }
      .inspeceList:after{
        height: 7.8125rem;
        width: 0.0625rem;
        // background: darkblue;
        content: "";
        position: absolute;
        top: 2rem;
        left: 0.8125rem;
        border-left: 0.125rem dotted #33c7b190;
        z-index: 1;
      }
    }
    .isInspeceListBox{
      background: #33c7b1;
    }
    .inspeceListBox:last-of-type{
      .inspeceList:after{
        display: none;
      }
    }
  }
  
}
</style>